<template>
    <form-field :dirty="dirty" @valid="onValid">
        <form-datetime 
            :theme="theme" 
            :weekText="weekText"
            :importants="importants"
            :now="now"
            :clear="clear"
            :min="min" 
            :max="max" 
            :start="dirtyStart" 
            :end="dirtyEnd" 
            :type="type" 
            :format="format" 
            :disabled="disabled"
            :placeholderStart="placeholderStart" 
            :placeholderEnd="placeholderEnd" 
            @change="onChange"/>
    </form-field>
</template>
<script lang="ts">
import { defineComponent, PropType, ref } from 'vue'
import FormField from './field.vue'
import FormDatetime from './datetime-cascade.vue'
export default defineComponent({
    components:{FormField,FormDatetime},
    props:{
        placeholderStart:{type:String},
        placeholderEnd:{type:String},
        disabled:{type:Boolean,default:false},
        start:{type:String,default:""},
        end:{type:String,default:""},
        min:{type:String},
        max:{type:String},
        theme:{type:String},
        weekText:{
            type:Array as PropType<Array<string>>
        },
        importants:{
            type:Array as PropType<Array<{title:string|number,md:string,desc:string}>>
        },
        clear:{
            type:Boolean,
            default:true
        },
        now:{
            type:Boolean,
            default:true
        },
        type:{type:String,default:"datetime"},
        format:{type:String},
    },
    setup(props,{emit}) {
        const dirtyStart = ref(props.start)
        const dirtyEnd = ref(props.end)
        const dirty = ref([props.start,props.end])

        const onChange = (v:string[])=>{
            dirtyStart.value = v[0]
            dirtyEnd.value = v[1]
            dirty.value = v
        }
        const onValid = (e:{valid:boolean,tip:string,v:unknown})=>{
            if(e.valid)
            emit("ph-change",e.v)
        }
        return {
            onValid,
            onChange,
            dirty,
            dirtyStart,
            dirtyEnd
        }
    },
})
</script>
